<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Title -->
    <title>KELION</title>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="../css/contact.css">
</head>

<body>
<!-- Menu -->
<!-- Navigation -->
<nav class="navbar">
    <div class="container-fluid">
        <a class="home-link" href="../index.html">Home</a>

        <a class="archives-link" href="contact.html">Contact</a>
        <a class="archives-link" href="about.html">About</a>
        <a class="archives-link" href="tags.html">Tags</a>
        <div class=" toggle-hide mobile-inner-header-icon mobile-inner-header-icon-out">
            <span></span><span></span>
        </div>
    </div>
    <div class="mobile-inner-nav" role="navigation">
        <a href="tags.html" style="animation-delay: 0.1s;">Tags</a>
        <a href="about.html" style="animation-delay: 0.2s;">About</a>
        <a href="contact.html" style="animation-delay: 0.3s;">Contact</a>
    </div>
</nav>

<!-- Main Content -->
<!-- Page Header -->
<!-- Set your background image for this header in the theme's configuration: index_cover -->
<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="">
                <div class="site-heading">
                    <h1 class="user-name">Contact</h1>
                    <hr class="small">
                    <span class="subheading">说不出口的废猫</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div class="section-contact">
           <form action="#" id="retro-mail-form">
           		<p id="contact-form-name-error" style="display: none;">Please, write your name.</p>
				<p id="contact-form-email-error" style="display: none;">Please, insert your true email address.</p>
				<p id="contact-form-message-error" style="display: none;">Please, leave a message.</p>
				<p id="contact-form-success" style="display: none;">Message received! Thanks.</p>
				<input type="text" name="name" id="name" placeholder="Name">
				<input type="email" name="email" id="email" placeholder="Email address">
				<textarea name="message" id="message" cols="60" rows="7" placeholder="Your message"></textarea>
				<a class='button'>Send</a>
				<p id="sending" style="display: none;">sending</p>
			</form>
        </div>
    </div>
</div>


<!-- Footer -->
<footer>
    <div class="">
    </div>
</footer>

<!-- jQuery -->
<script src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        function toggleNavClass() {
            $(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
            $(".mobile-inner-nav").slideToggle(250);
        }
        var headerIcon = document.getElementsByClassName("mobile-inner-header-icon")[0];
        headerIcon.addEventListener("click", toggleNavClass, false);

        $(".mobile-inner-nav a").each(function (index) {
            $(this).css({'animation-delay': (index / 10) + 's'});
        });
    });
    
    
    $(document).ready(function(){
    	var sendBtn = document.getElementsByClassName("button")[0];
    	var form = document.getElementById("retro-mail-form");
    	var nameInput = form.elements[0];
    	var emailInput = form.elements[1];
    	var messageText = form.elements[2];
    	function Validate(){
    		var name = nameInput.value;
    		var email = emailInput.value;
    		var message = messageText.value;
    		if($.trim(name) === ""){
    			var error = $("#contact-form-name-error");
    			error.show(500);
    			setTimeout(function(){error.hide(500)},1000);
    			return;
    		}
    		var regEmail = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
    		if(!regEmail.test($.trim(email))){
    			var error = $("#contact-form-email-error");
    			error.show(500);
    			setTimeout(function(){error.hide(500)},1000);
    			return;
    		}
    		if($.trim(message) === ""){
    			var error = $("#contact-form-message-error");
    			error.show(500);
    			setTimeout(function(){error.hide(500)},1000);
    			return;
    		}
    		send(name,email,message);
    	}
        sendBtn.addEventListener("click",Validate,false);
        function send(name,email,message){
        	 $.ajax({
     			url : "../sendEmail.do",
     			type : "POST",
     			data : {
     				"name" : name,
     				"email" : email,
     				"message":message
     			},
     			dataType : "json",
     			success : function(msg) {
     				console.log(msg);
     				if(msg){
     					var success = $("#contact-form-success");
     					success.html("Message received! Thanks.");
     					success.show(500);
     	    			setTimeout(function(){success.hide(500)},5000);
     	    			return;
     				}else {
     					var success = $("#contact-form-success");
     					success.html("send failed,please try again");
     					success.show(500);
     	    			setTimeout(function(){success.hide(500)},3000);
     	    			return;
     				}
     			},
     			error : function(er) {
     				var success = $("#contact-form-success");
     				success.html("send failed,please check your Internet");
 					success.show(500);
 	    			setTimeout(function(){success.hide(500)},3000);
     				console.log(er);
     			}
     		});
        }
    });
    
</script>

</body>
</html>